<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <style>
    html,body {
    margin: 0;
    }
    .footer-over {
    position: relative;
    width: 100%;
    height: 1600px;
    background: #f7f7f7;
    color: #444;
    margin-top: 600px;
    z-index: 10;
    border-radius: 30px;
    }
    .site-footer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000px;
    background: #1a1a1a;
    color: #ddd;
    z-index: 0;
    }
    </style>
    <div class="footer-over">这是滚动的上层<br />这是滚动的上层<br />这是滚动的上层<br />这是滚动的上层<br />这是滚动的上层</div>
    
    <div class="site-footer">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda a nesciunt exercitationem, corporis ipsam voluptatum accusantium, aliquid doloribus sint rerum quod sunt et corrupti impedit suscipit eum obcaecati blanditiis dicta ipsa vel laborum. Ullam dolorem eum earum quam. Voluptate, molestiae eaque consequuntur dolor id atque nostrum et dolorem dolores error velit! Nisi nostrum dolorum unde aliquam, facere est alias delectus nobis iure corporis culpa nam ratione impedit quisquam? Quasi, quos! Et tenetur quos facere inventore, labore rem necessitatibus in asperiores unde, impedit maiores sit accusamus ipsam optio dolores fuga aspernatur maxime tempora architecto! Distinctio ullam qui nihil, eveniet aliquam obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt mollitia explicabo delectus laboriosam amet, odio, cumque quo ex recusandae architecto rerum blanditiis quidem non est voluptate obcaecati quam, consequuntur facilis. 这是固定的下层<br />这是固定的下层<br />这是固定的下层<br />这是固定的下层<br />这是固定的下层</div>
</body>
</html>